<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="70%"
      @close="btnClose"
    >
      <el-row
        type="flex"
        class="type"
      >
        <el-col :span="6">【题型】:{{showData.questionType}}</el-col>
        <el-col :span="6">【编号】:{{showData.id}}</el-col>
        <el-col :span="6">【难度】:{{showData.difficulty}}</el-col>
        <el-col :span="6">【标签】:{{showData.tags}}</el-col>
      </el-row>
      <el-row
        type="flex"
        class="type"
      >
        <el-col :span="6">【学科】:{{showData.subjectName}}</el-col>
        <el-col :span="6">【目录】:{{showData.directoryName}}</el-col>
        <el-col :span="6">【方向】:{{showData.direction}}</el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row
        class="type"
        type="flex"
        justify="start"
        align="middle"
      >
        <el-col :span="2">【题干】:</el-col>
        <el-col
          :span="20"
          v-html="showData.question"
        ></el-col>
      </el-row>
      <el-row
        class="type"
        type="flex"
        justify="start"
        align="middle"
      >
        <el-col :span="2">{{showData.questionType}}题</el-col>
        <el-col :span="8">选项:(以下选中的选项为正确答案)</el-col>
      </el-row>
      <!-- 单选 -->
      <el-row
        v-if="showData.questionType=='单选'"
        type="flex"
        class="type check"
      >
        <el-radio-group v-model="radio">
          <el-radio
            v-for="(item,index) in showData.options"
            :label="item.isRight"
            :key="index"
          >{{item.title}}</el-radio>
        </el-radio-group>
      </el-row>
      <!-- 多选 -->
      <el-row v-else-if="showData.questionType=='多选'">
        <el-checkbox-group
          v-model="checkList"
          class="checkbox"
        >
          <el-checkbox
            v-for="(item,index) in showData.options"
            :label="item.isRight"
            :key="index"
          >{{item.title}}</el-checkbox>
        </el-checkbox-group>
      </el-row>
      <!-- 简答 -->
      <el-row v-else>
        <el-col></el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row
        type="flex"
        class="type"
        justify="start"
        align="middle"
      >
        <el-col :span="3">【参考答案】:</el-col>
        <el-col :span="4">
          <el-button
            type="danger"
            @click="showVideo=true"
          >视频答案预览</el-button>
        </el-col>
      </el-row>
      <el-row>
        <video
          v-if="showVideo"
          :src="showData.videoURL"
          controls
        ></video>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row
        class="type"
        type="flex"
        justify="start"
        align="middle"
      >
        <el-col :span="3">【答案解析】:</el-col>
        <el-col :span="21">用于布局的容器组件，方便快速搭建页面的基本结构</el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row
        class="type"
        type="flex"
        justify="start"
        align="middle"
      >
        <el-col :span="3">【题目备注】:</el-col>
        <el-col :span="21">用于布局的容器组件，方便快速搭建页面的基本结构</el-col>
      </el-row>
      <span slot="footer">
        <el-button
          @click="btnClose"
          type="primary"
        >关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入接口函数
import { detail } from '@/api/hmmm/questions'
// 引入枚举文件
import { questionType, difficulty, direction, } from '@/api/hmmm/constants'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      radio: 1, //单选按钮绑定数据

      checkList: [1], //多选框选中选项的数据数组

      showData: {}, //预览题目数据对象

      showVideo: false, //控制视频显示
    }
  },
  methods: {
    btnClose () { //关闭弹层按钮
      this.showData = {} //清空预览信息
      this.$emit('update:showDialog', false) //关闭弹层
    },

    async getQuestionDetail (id) { //获取题目详情
      const { data } = await detail({ id: id })
      // 调用格式化数据函数
      data.questionType = this.formatterData(questionType, data.questionType)
      data.difficulty = this.formatterData(difficulty, data.difficulty)
      this.showData = data
    },

    formatterData (data, value) { //格式化数据函数
      const obj = data.find(item => item.value == value)
      return obj ? obj.label : ''
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .type {
    margin-bottom: 20px;
    font-size: 18px;
  }
  .check {
    .el-radio {
      .el-radio__label {
        // font-size: 18px !important;
        color: red;
      }
    }
    height: 100px;

    flex-direction: column;
    justify-content: space-around;
  }
  .checkbox {
    display: flex;
    height: 150px;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
